<template>
	<!-- <view class="">546546</view> -->
 <page-container title="我的资产">
    
	<view class="postop">
		<view class="assets-page">
		  <tab-bar 
		    :tabs="tabs"
		    :current="currentTab"
		    @change="handleTabChange"
		  />
		
		<view class="bill-container" v-if="currentTab !== 2" >
			<view class="filter-header">
				<picker :value="billTypeIndex" :range="billTypes" @change="onBillTypeChange">
					<view class="all-bills">
			
						<text>{{ currentBillType }}</text>
						<view class="triangle"></view>
					</view>
				</picker>
			
				<view class="statistics">
					<text>统计</text>
					<text class="iconfont icon-more "></text>
				</view>
			</view>
			
			<view class="date-picker">
				<picker mode="date" fields="month" :value="selectedDate" @change="onDateChange">
					<view>
						<text>{{ formatDate }}</text>
					</view>
				</picker>
				<text class="iconfont icon-more"></text>
				<text class="expense">支出</text>
			</view>
			<bill-list
			  v-if="currentTab === 0"
			  :list="billList"
			  :loading="loading"
			  :hasMore="hasMore"
			  @loadMore="loadMore"
			  @refresh="refresh"
			/>
			
			<integral-list
			  v-if="currentTab === 1" 
			  :list="integralList"
			  :carIntegraList="carIntegraList"
			  :loading="loading"
			  :hasMore="hasMore"
			  @loadMore="loadMore"
			  @refresh="refresh"
			/>
			
		</view>
		
		  
		
		  <coupon-list
		    v-if="currentTab === 2"
		    :userInfo="computedUserInfo"
		    :cardList="cardList"
			:carIntegraList="carIntegraList"
		  />
		</view>
		
	</view>
	
  </page-container>
</template>

<script lang="ts" src="./index.ts"></script> 
<style lang="scss" scoped>
	.postop{
		position: relative;
		z-index: 11;
	}
	.bill-container {
		height: calc(100vh - 130px); // 减去顶部导航和选项卡的高度
	
		.filter-header {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 26rpx;
			font-size: 13px;
			color: #666;
			background-color: #efefef;
	
			.all-bills,
			.statistics {
				display: flex;
				align-items: center;
				gap: 4px;
			}
	
			.statistics {
				text {
					font-size: 24rpx;
					color: #afafaf;
				}
	
				.iconfont {
					font-size: 14rpx;
					position: relative;
					left: -4rpx;
					top: 2rpx;
				}
			}
	
			.all-bills {
				// display: flex;
				width: 160rpx;
				height: 44rpx;
				background: #e3e3e3;
				border-radius: 20rpx;
				text-align: center;
				align-items: center;
				justify-items: center;
				padding-left: 20rpx;
				position: relative;
	
				.triangle {
					position: absolute;
					top: 20rpx;
					right: 18rpx;
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					/* 左边透明 */
					border-right: 8rpx solid transparent;
					/* 右边透明 */
					border-top: 10rpx solid #707070;
					/* 下边颜色填充为黑色 */
				}
	
				text {
					// margin: 0 auto;
					font-size: 12px;
					font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
					font-weight: 700;
					// text-align: left;
					color: #1a1a1a;
				}
			}
		}
	
		.line-box {
			width: 100%;
			background-color: #efefef;
	
			.line {
				width: 90%;
				margin: 0 auto;
				height: 2rpx;
				background-color: #afafaf;
			}
		}
	
		.date-picker {
			padding: 12px 16px;
			display: flex;
			align-items: center;
			// font-size: 13px;
			background-color: #efefef;
	
			.iconfont {
				font-size: 14rpx;
				transform: rotate(90deg);
				margin-left: 6rpx;
			}
	
			.dateTime {
				font-size: 24rpx;
				font-weight: 500;
				color: #1a1a1a;
			}
	
			.expense {
				font-size: 24rpx;
				margin-left: auto;
				color: #afafaf;
			}
		}
	
		.bill-list {
			.bill-item {
				display: flex;
				align-items: center;
				padding: 0rpx 26rpx;
				background-color: #fff;
				// border-bottom: 1px solid #f5f5f5;
	
				.bill-icon {
					width: 84rpx;
					height: 84rpx;
					border-radius: 4px;
				}
	
				.bill-box {
					flex: 1;
					display: flex;
					border-bottom: 1px solid #f5f5f5;
					padding-bottom: 26rpx;
					margin-left: 12px;
					padding-top: 18rpx;
				}
	
				.bill-info {
					flex: 1;
					// margin-left: 12px;
					.bill-name {
						font-size: 34rpx;
						color: #000000;
						overflow: hidden;   
						width: 380rpx;
					white-space: nowrap;           /* 防止文本换行 */
					 overflow: hidden;              /* 隐藏超出容器的部分 */
					 text-overflow: ellipsis; 
						// display: block;
						// width: 100%;
						
					}
	
					.bill-time {
						font-size: 24rpx;
						color: #afafaf;
						margin-top: 4px;
						display: block;
					}
				}
	
				.bill-amount {
					font-size: 34rpx;
					color: #000000;
				}
			}
		}
	
		.list-bottom {
			text-align: center;
			padding: 16px;
			color: #999;
			font-size: 12px;
		}
	}
	
</style>